<!DOCTYPE html>
<html lang="en">

<head>
    <meta>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Document</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="./js/store.legacy.min.js"></script>
</head>

<body>
    <button style="padding: 10px; margin: 10px;" onclick="store.clearAll()">清除缓存</button>
<!--     <img width="100%" data-src='./images/1.jpg' src="./images/default.gif">
    <img width="100%" data-src='./images/5.jpg' src="./images/default.gif">
    <img width="100%" data-src='./images/6.jpg' src="./images/default.gif">
    <img width="100%" data-src='./images/2.png' src="./images/default.gif">
    <img width="100%" data-src='./images/3.png' src="./images/default.gif"> -->
    <img width="100%" data-src='./images/4.png' src="./images/default.gif">
    <img width="100%" data-src='./images/5.png' src="./images/default.gif">
    <img width="100%" data-src='./images/6.png' src="./images/default.gif">
    <img width="100%" data-src='./images/7.png' src="./images/default.gif">
    <img width="100%" data-src='./images/4.jpg' src="./images/default.gif">
    <script type="text/javascript">
    //获取img url
    var imgAY = selectAll('img');
    //图片src属性   作为缓存的key
    var srcImg = [];

    for (var i = 0; i < imgAY.length; i++) {
        srcImg.push(imgAY[i].getAttribute('data-src'));
    }

    //启动缓存
    localStrogeImg(srcImg);

    /**
     * [localStrogeImg 图片本地缓存]
     * @Author   zhanggongze
     * @DateTime 2017-06-01
     * @param    {[array]}    srcImg [图片data-src属性]
     * @return   {[type]}           [description]
     */
    function localStrogeImg(srcImg) {

        window.oCaches = store.get('imgCache');

        if (oCaches == undefined) {

            //保存图片编码
            var imgBase = {};

            for (var j = 0; j < srcImg.length; j++) {
                loadImg(srcImg[j], imgBase);
            }

        } else {

            //循环遍历 图片src属性
            for (var k = 0; k < srcImg.length; k++) {

                //如果一直为false表示缓存里面,没有该地址(srcImg[k])的图片缓存信息
                var isCache = false;

                //循环遍历 缓存信息
                for (var key in oCaches) {
                    //判断 缓存的key是否和图片src属性相同 相同表示该图片已经缓存 直接取缓存的信息做展示即可
                    if (key == srcImg[k]) {
                        cacheImg(key);
                        isCache = true;
                    }
                }

                //有新图片,缓存需要更新了
                if (!isCache) {
                    console.log('有新图片,缓存需要更新了!!!!');
                    console.log(srcImg[k]);
                    //获取已经缓存了的数据
                    var _imgBase = store.get('imgCache');
                    loadImg(srcImg[k], _imgBase);
                }

            }

        }

    };


    /**
     * [loadImg 读取服务器上的图片]
     * @Author   zhanggongze
     * @DateTime 2017-06-03
     * @param    {[type]}    srcImg   [图片资源地址]
     * @return   {[type]}          [description]
     */
    function loadImg(srcImg, imgBase) {

        var oImg = new Image();
        oImg.src = srcImg;

        oImg.onload = function() {

            //展示图片
            selector('[data-src="' + srcImg + '"]').setAttribute('src', srcImg);

            //转码
            imgBase[srcImg] = getBase64Image(oImg);

            //将图片的Base64编码 缓存起来
            try{
                store.set('imgCache', imgBase);
            }catch(e){
                console.log(srcImg);
                console.log(e);
            }

        }

    };

    /**
     * [cacheImg 读取缓存图片]
     * @Author   zhanggongze
     * @DateTime 2017-06-03
     * @param    {[type]}    m [description]
     * @return   {[type]}      [description]
     */
    function cacheImg(key) {
        selector('[data-src="' + key + '"]').setAttribute('src', oCaches[key]);
    }

    /**
     * [getBase64Image 将图片转成Base64编码]
     * @Author   zhanggongze
     * @DateTime 2017-06-03
     * @param    {[type]}    img [图片对象]
     * @return   {[type]}        [Base64编码]
     */
    function getBase64Image(img) {

        var canvas = document.createElement("canvas");

        canvas.width = img.width;
        canvas.height = img.height;

        var ctx = canvas.getContext("2d");

        ctx.drawImage(img, 0, 0, img.width, img.height);

        var dataURL = canvas.toDataURL("image/jpg");

        return dataURL

    };

    //单个元素选择器
    function selector(str) {
        return document.querySelector(str);
    }

    //元素选择器
    function selectAll(str) {
        return document.querySelectorAll(str);
    }

    /**
     * [removeItem 删除指定本地数据]
     * @Author   zhanggongze
     * @DateTime 2017-06-03
     * @param    {[type]}    _name [存储名]
     * @param    {[type]}    _key  [数据的key]
     * @return   {[type]}          [obj]
     */
    function removeItem(_name, _key) {
        store.each(function(value, key) {
            if (_name === key) {
                delete value[_key];
                store.set(_name, value);
            }
        });
        return store.get(_name);
    }
    </script>
</body>

</html>
